<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
        <el-form-item label="采集任务名称" prop="dutiesId">
          <el-select v-model="dutiesId" placeholder="请选择状态" clearable
                     @change="getList($event)">
            <el-option
              v-for="dict in jobDuties"
              :key="dict.id"
              :label="dict.dutiesName"
              :value="dict.id"
            />
          </el-select>
        </el-form-item>
          <el-form-item style="float: right">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="handleEdit">保存</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetEdit">重置</el-button>
          </el-form-item>
        </el-form>

      <div style="display:inline-block;float: left;margin-left: 50px;margin-top: 20px" v-for="(item, index) in categoryList">
        <span> {{index}}
        <el-table border="border"
                  max-height="550px" :data="item" v-loading="loading"  :ref="index">
          <el-table-column type="selection" selection="true" width="55" align="center"/>
          <el-table-column label="作业任务名称" min-width="100%"  align="center" prop="name" />
        </el-table>
          </span>
      </div>
    </div>
</template>

<script>
    import { listCategory, getCategory, delCategory, addCategory, updateCategory } from "@/api/kettle/category";
    import { getTableRowStyle } from "@/utils/yss";
    export default {
        name: "Category",
            dicts: ['sys_common_status','kettle_category'],
        data() {
            return {
              // 遮罩层
              loading: true,
              // 采集任务
              jobDuties :[],
              // 选中数组
              ids: [],
              // 非单个禁用
              single: true,
              // 非多个禁用
              multiple: true,
              // 显示搜索条件
              showSearch: true,
              // 采集分类信息表格数据
              categoryList: [],
              dutiesId:null,
              jobDutiesTaskList:[],
            // 表单参数
            form: {},
            // 表单校验
            rules: {
            }
        };
        },
        created() {
            const id = this.$route.params && this.$route.params.id;
             this.dutiesId = id;
             this.getList();
        },
        methods: {
            /** 重置按钮操作 */
            resetEdit() {
              this.resetForm("queryForm");
            },
            /** 搜索按钮操作 */
            handleEdit() {
              this.queryParams.pageNum = 1;
              this.getList();
            },
            /** 查询采集分类信息列表 */
            getList() {
              this.loading = true;
              listCategory(this.dutiesId).then(response => {
                this.jobDuties=response.jobDuties;
                this.categoryList=response.categoryList;
                this.jobDutiesTaskList=response.jobDutiesTaskList;
                this.loading = false;
                let list = [];
                for(let i in this.categoryList){
                  for(let m in this.categoryList[i]){
                    for(let k in this.jobDutiesTaskList){
                      if (this.jobDutiesTaskList[k].taskId === this.categoryList[i][m].id) {
                         list.push(this.categoryList[i])
                      }
                    }
                  }
                }
              if (list) {
                list.forEach((row) => {
                  for(let i in this.categoryList) {
                    this.$refs.i.toggleRowSelection(row);
                  }
              })
              }
            });
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.id)
                this.single = selection.length!==1
                this.multiple = !selection.length
            },
            /** 提交按钮 */
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                      this.butloading=true;
                        if (this.form.id != null) {
                            updateCategory(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        }).finally(() => {this.butloading=false});
                        } else {
                            addCategory(this.form).then(response => {
                                this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        }).finally(() => {this.butloading=false});
                        }
                    }
                });
            },
    tableRowStyle({ row, rowIndex}){
        return getTableRowStyle(row,rowIndex,this.ids);
    },
    /** 单击选中行数据 */
    rowClick(row) {
        this.$refs.category.toggleRowSelection(row);
    }
    }
    };
</script>
